<template>
  <div id="app">
    <transition mode="out-in">
      <router-view></router-view>
    </transition>
    <!-- 底部导航 -->
    <van-tabbar
      v-model="$store.state.active"
      active-color="#e83632"
      inactive-color="#1e2625"
      v-if="$store.state.tabBarShow"
    >
      <van-tabbar-item to="/home">
        <span>主页</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? 'images/nav_1_active.png' : 'images/nav_1.png'"
        />
      </van-tabbar-item>
      <van-tabbar-item to="/listItem">
        <span>分类</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? 'images/nav_2_active.png' : 'images/nav_2.png'"
        />
      </van-tabbar-item>
      <van-tabbar-item to="/find">
        <span>发现</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? 'images/nav_3_active.png' : 'images/nav_3.png'"
        />
      </van-tabbar-item>
      <van-tabbar-item to="/shopCar" :info="$store.getters.getGoodsAllCount">
        <span>购物车</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? 'images/nav_4_active.png' : 'images/nav_4.png'"
        />
      </van-tabbar-item>
      <van-tabbar-item to="/user">
        <span>我的</span>
        <img
          slot="icon"
          slot-scope="props"
          :src="props.active ? 'images/nav_5_active.png' : 'images/nav_5.png'"
        />
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
    };
  },
  methods: {}
};
</script>
<style lang="less" scoped>
#app {
  overflow-x: hidden;
  overflow-y: hidden;
  .van-tabbar-item {
    font-size: 0.24rem;
  }
  .van-tabbar-item__icon img {
    width: 0.44rem;
    height: 0.44rem;
  }
  .van-tabbar {
    height: 1.05rem;
    border-top: 0.01rem solid #ccc;
    background-color: #f4f4f4;
  }
  /deep/.van-info {
    top: -8px;
    right: 0.5rem;
  }
}

//动画
.v-enter {
  opacity: 0;
  transform: translateX(100%);
}
.v-leave {
  opacity: 0;
  transform: translateX(-100%);
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s;
}
</style>
